
{%- liquid
  case section.settings.text_alignment
    when 'left'
      assign text_alignment = 'text-md-start'
      assign content_alignment = 'mx-md-0'
    when 'center'
      assign text_alignment = 'text-md-center'
      assign content_alignment = 'mx-md-auto'
    when 'right'
      assign text_alignment = 'text-md-end'
      assign content_alignment = 'mx-md-auto'
  endcase

    case section.settings.mobile_text_alignment
    when 'left'
      assign text_alignment = text_alignment | append: ' text-start'
      assign content_alignment = content_alignment | append: ' mx-0'
    when 'center'
      assign text_alignment = text_alignment | append: ' text-center'
      assign content_alignment = content_alignment | append: ' mx-auto'
       when 'right'
      assign text_alignment = 'text-end'
      assign content_alignment = 'mx-auto'
  endcase

       assign mark = 'h2'
    if section.settings.enable_adjust_h_tag
      assign mark = section.settings.adjust_h_tag_to
    endif
-%}
{%- assign section_identifier = '#shopify-section-' | append: section.id -%}
{%- assign  padding_top = section.settings.padding_top | append:'px' -%}
{%- assign  padding_bottom = section.settings.padding_bottom | append:'px' -%}

{%- assign padding_mobile_top = section.settings.padding_top_mob | append: 'px' -%}
{%- assign padding_mobile_bottom = section.settings.padding_bottom_mob | append: 'px' -%}

{%- style -%}
 {{ section_identifier }} {
    padding-top: {{padding_top}};
    padding-bottom: {{padding_bottom}};
  }

 @media only screen and (max-width: 430px) {
    {{ section_identifier }} {
      padding-top: {{ padding_mobile_top }};
      padding-bottom: {{ padding_mobile_bottom }};
    }
  }

  {{ section_identifier }} span.highlighter {
    color: {{ section.settings.highlighter_color }};
  }
{%- endstyle -%}

<div class="video-pairing container">
    {%- if section.settings.caption_content != blank or section.settings.content != blank -%}
    <div class="section-content">
      <div class="{{ text_alignment }} {{ content_alignment }}">
           {%- if section.settings.heading != blank -%}
            <{{ mark }} class="mb-0 section-title">{{ section.settings.heading }}</{{ mark }}>
          {%- endif -%}
        {%- if section.settings.content != blank -%}
          <div class="no-last-margin">
             {{- section.settings.content -}}
          </div>
        {%- endif -%}
      </div>
    </div>
{%- endif -%}
  <div class="video-pairing__container">
    <div class="video-pairing__grid">
      <div class="video-pairing__media-container" data-video-container="left">
        {% if section.settings.left_video_shopify != blank %}
          {% if section.settings.left_poster != blank %}
           {{ section.settings.left_poster | image_url: width: section.settings.left_poster.width | image_tag: loading: 'lazy', sizes: 'min(100vw, 560px)', widths: '200,300,400,500,600,800,1000,1200,1400,1600', class: 'image-background video-pairing__media poster-image' }}
          {% endif %}
          <button class="video-pairing__play-button" aria-label="Play video">
              {%- render 'icon' with 'custom-play', class: 'custom-play-btn' -%}
          </button>
          <div class="video-pairing__media desktop-only">
            {{ section.settings.left_video_shopify | video_tag: class: 'video-pairing__media', controls: true, muted: true }}
          </div>
          {% if section.settings.left_video_shopify_mobile != blank %}
            <div class="video-pairing__media mobile-only">
              {{ section.settings.left_video_shopify_mobile | video_tag: class: 'video-pairing__media', controls: true, muted: true }}
            </div>
          {% else %}
            <div class="video-pairing__media mobile-only">
              {{ section.settings.left_video_shopify | video_tag: class: 'video-pairing__media', controls: true, muted: true }}
            </div>
          {% endif %}
        {% elsif section.settings.left_video_url != blank %}
          {% if section.settings.left_poster != blank %}
            {{ section.settings.left_poster | image_url: width: section.settings.left_poster.width | image_tag: loading: 'lazy', sizes: 'min(100vw, 560px)', widths: '200,300,400,500,600,800,1000,1200,1400,1600', class: 'image-background video-pairing__media poster-image' }}
          {% endif %}
          <button class="video-pairing__play-button" aria-label="Play video">
            {%- render 'icon' with 'custom-play', class: 'custom-play-btn' -%}
          </button>
          {% if section.settings.left_video_url contains "youtube.com" or section.settings.left_video_url contains "youtu.be" %}
            <iframe
              class="video-pairing__media"
              src="{{ section.settings.left_video_url }}?enablejsapi=1&controls=1&mute=1"
              allow="autoplay; encrypted-media"
              allowfullscreen
            ></iframe>
          {% elsif section.settings.left_video_url contains "vimeo.com" %}
            <iframe
              class="video-pairing__media"
              src="{{ section.settings.left_video_url }}?api=1&controls=1&background=0"
              allow="autoplay; encrypted-media"
              allowfullscreen
            ></iframe>
          {% else %}
            <video class="video-pairing__media" controls muted playsinline {% if section.settings.left_poster != blank %}poster="{{ section.settings.left_poster | image_url: width: 1000 }}"{% endif %}>
              <source src="{{ section.settings.left_video_url | asset_url }}" type="video/mp4">
            </video>
          {% endif %}
        {% elsif section.settings.left_image %}
          <img
            class="video-pairing__media lazyload"
            src="{{ section.settings.left_image | image_url: width: 100 }}"
            data-src="{{ section.settings.left_image | image_url: width: 1000 }}"
            data-srcset="{{ section.settings.left_image | image_url: width: 500 }} 500w,
                       {{ section.settings.left_image | image_url: width: 800 }} 800w,
                       {{ section.settings.left_image | image_url: width: 1000 }} 1000w"
            data-sizes="auto"
            alt="{{ section.settings.left_image.alt | escape }}"
            loading="lazy"
            width="{{ section.settings.left_image.width }}"
            height="{{ section.settings.left_image.height }}"
          >
        {% endif %}
      </div>

      <div class="video-pairing__media-container" data-video-container="right">
        {% if section.settings.right_video_shopify != blank %}
          {% if section.settings.right_poster != blank %}
              {{ section.settings.right_poster | image_url: width: section.settings.right_poster.width | image_tag: loading: 'lazy', sizes: 'min(100vw, 560px)', widths: '200,300,400,500,600,800,1000,1200,1400,1600', class: 'image-background video-pairing__media poster-image' }}
          {% endif %}
          <button class="video-pairing__play-button" aria-label="Play video">
              {%- render 'icon' with 'custom-play', class: 'custom-play-btn' -%}
          </button>
          <div class="video-pairing__media desktop-only">
            {{ section.settings.right_video_shopify | video_tag: class: 'video-pairing__media', controls: true, muted: true }}
          </div>
          {% if section.settings.right_video_shopify_mobile != blank %}
            <div class="video-pairing__media mobile-only">
              {{ section.settings.right_video_shopify_mobile | video_tag: class: 'video-pairing__media', controls: true, muted: true }}
            </div>
          {% else %}
            <div class="video-pairing__media mobile-only">
              {{ section.settings.right_video_shopify | video_tag: class: 'video-pairing__media', controls: true, muted: true }}
            </div>
          {% endif %}
        {% elsif section.settings.right_video_url != blank %}
          {% if section.settings.right_poster != blank %}
            {{ section.settings.right_poster | image_url: width: section.settings.right_poster.width | image_tag: loading: 'lazy', sizes: 'min(100vw, 560px)', widths: '200,300,400,500,600,800,1000,1200,1400,1600', class: 'image-background video-pairing__media poster-image' }}
          {% endif %}
          <button class="video-pairing__play-button" aria-label="Play video">
               {%- render 'icon' with 'custom-play', class: 'custom-play-btn' -%}
          </button>
          {% if section.settings.right_video_url contains "youtube.com" or section.settings.right_video_url contains "youtu.be" %}
            <iframe
              class="video-pairing__media"
              src="{{ section.settings.right_video_url }}?enablejsapi=1&controls=1&mute=1"
              allow="autoplay; encrypted-media"
              allowfullscreen
            ></iframe>
          {% elsif section.settings.right_video_url contains "vimeo.com" %}
            <iframe
              class="video-pairing__media"
              src="{{ section.settings.right_video_url }}?api=1&controls=1&background=0"
              allow="autoplay; encrypted-media"
              allowfullscreen
            ></iframe>
          {% else %}
            <video class="video-pairing__media" controls muted playsinline {% if section.settings.right_poster != blank %}poster="{{ section.settings.right_poster | image_url: width: 1000 }}"{% endif %}>
              <source src="{{ section.settings.right_video_url | asset_url }}" type="video/mp4">
            </video>
          {% endif %}
        {% elsif section.settings.right_image %}
          <img
            class="video-pairing__media lazyload"
            src="{{ section.settings.right_image | image_url: width: 100 }}"
            data-src="{{ section.settings.right_image | image_url: width: 1000 }}"
            data-srcset="{{ section.settings.right_image | image_url: width: 500 }} 500w,
                       {{ section.settings.right_image | image_url: width: 800 }} 800w,
                       {{ section.settings.right_image | image_url: width: 1000 }} 1000w"
            data-sizes="auto"
            alt="{{ section.settings.right_image.alt | escape }}"
            loading="lazy"
            width="{{ section.settings.right_image.width }}"
            height="{{ section.settings.right_image.height }}"
          >
        {% endif %}
      </div>
    </div>
  {%- if section.settings.caption_content != blank -%}
    <div class="caption">
        <div class="{{ text_alignment }} {{ content_alignment }}">
           {%- if section.settings.caption_content != blank -%}
            <div class="caption-content">
             <h5>{{ section.settings.caption_content }}</h5>
            </div>
          {%- endif -%}
        </div>
    </div>
{%- endif -%}
</div>

{% schema %}
{
  "name": "kiks Video Pairing",
  "class": "kiks-video-pairing",
  "tag": "section",
  "settings": [
    {
        "type": "text",
        "id": "heading",
        "label": "Heading",
        "default": "Custom Slider"
    },
    {
        "type": "richtext",
        "id": "content",
        "label": "Content",
        "default": "<p>Organize content into multiple columns to share useful information to your customers about your products, values...</p>"
    },
    {
        "type": "text",
        "id": "highlighter",
        "label": "High lighter",
        "default": "Custom Slider"
    },
    {
      "type": "image_picker",
      "id": "left_image",
      "label": "Left Image"
    },
    {
      "type": "image_picker",
      "id": "left_poster",
      "label": "Left Video Poster Image",
      "info": "Cover image shown before video plays"
    },
    {
      "type": "video",
      "id": "left_video_shopify",
      "label": "Left Video upload (Desktop)",
      "info": "Hosted by Shopify. Replaces External video if both are set."
    },
    {
      "type": "video",
      "id": "left_video_shopify_mobile",
      "label": "Left Video upload (Mobile)",
      "info": "Optional. If not set, desktop video will be used on mobile."
    },
    {
      "type": "text",
      "id": "left_video_url",
      "label": "Left External video",
      "info": "Supports [YouTube](https://youtubeembedcode.com/en/) and [Vimeo](https://help.vimeo.com/hc/en-us/articles/12426486963857-Autoplay-and-loop-embedded-videos)."
    },
    {
      "type": "image_picker",
      "id": "right_image",
      "label": "Right Image"
    },
    {
      "type": "image_picker",
      "id": "right_poster",
      "label": "Right Video Poster Image",
      "info": "Cover image shown before video plays"
    },
    {
      "type": "video",
      "id": "right_video_shopify",
      "label": "Right Video upload (Desktop)",
      "info": "Hosted by Shopify. Replaces External video if both are set."
    },
    {
      "type": "video",
      "id": "right_video_shopify_mobile",
      "label": "Right Video upload (Mobile)",
      "info": "Optional. If not set, desktop video will be used on mobile."
    },
    {
      "type": "text",
      "id": "right_video_url",
      "label": "Right External video",
      "info": "Supports [YouTube](https://youtubeembedcode.com/en/) and [Vimeo](https://help.vimeo.com/hc/en-us/articles/12426486963857-Autoplay-and-loop-embedded-videos)."
    },
    {
        "type": "textarea",
        "id": "caption_content",
        "label": "Caption Content",
        "info": "This content will be displayed below the slider. To Use the highlighter (<span class='highlighter'>high light me</span>)",
        "default": "<p>Organize content into multiple columns to share useful information to your customers about your products, values...</p>"
    },
    {
        "type": "header",
        "content": "All Settings"
    },
    {
        "type": "checkbox",
        "id": "enable_adjust_h_tag",
        "label": "Enable adjust H tag",
        "default": false
    },
    {
        "type": "select",
        "id": "adjust_h_tag_to",
        "label": "Adjust the H tag to",
        "options": [
        {
            "value": "h1",
            "label": "H1"
        },
        {
            "value": "h2",
            "label": "H2"
        },
        {
            "value": "h3",
            "label": "H3"
        },
        {
            "value": "h4",
            "label": "H4"
        },
        {
            "value": "h5",
            "label": "H5"
        },
        {
            "value": "h6",
            "label": "H6"
        }
        ],
        "default":   "h3"
    },
    {
        "type": "select",
        "id": "text_alignment",
        "label": "Text alignment",
        "options": [
        {
            "value": "left",
            "label": "Left"
        },
        {
            "value": "center",
            "label": "Center"
        },
        {
            "value": "right",
            "label": "Right"
        }
        ],
        "default": "center"
    },
    {
        "type": "select",
        "id": "mobile_text_alignment",
        "label": "Mobile text alignment",
        "options": [
            {
            "value": "left",
            "label": "Left"
            },
            {
            "value": "center",
            "label": "Center"
            },
            {
            "value": "right",
            "label": "Right"
            }
        ],
        "default": "center"
    },
    {
        "type": "color",
        "id": "highlighter_color",
        "label": "Highlighter color",
        "default": "#f0c040"
    },
    {
        "type": "header",
        "content": "Kikstart Spacing Settings"
     },
     {
        "type": "range",
        "id": "padding_top",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "Padding top",
        "default": 64
      },
      {
        "type": "range",
        "id": "padding_bottom",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "Padding Bottom",
        "default": 64
      },
      {
        "type": "range",
        "id": "padding_top_mob",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "For Mobile Padding top",
        "default": 48
      },
      {
        "type": "range",
        "id": "padding_bottom_mob",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "For Mobile Padding Bottom",
        "default": 48
      }
  ],
  "presets": [
    {
      "name": "kiks Video Pairing",
      "category": "Video"
    }
  ]
}
{% endschema %}